<template>
  <!--住户登记-->
  <div class="ClientRegister">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/sys-admin/index' }">
        <i class="el-icon-s-promotion"></i> 酒店客房后台管理首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>住户管理</el-breadcrumb-item>
      <el-breadcrumb-item>住户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <span class="spanName">客房类型</span>
    <el-select v-model="roomValue" placeholder="请选择">
      <el-option
          v-for="item in options1"
          :key="item.roomValue"
          :label="item.label"
          :value="item.roomValue">
      </el-option>
    </el-select>
    <span class="spanName">客房号:</span>
    <el-input v-model="roomInput" style="width:200px " maxlength="3" placeholder="请输入房号"><i
        slot="suffix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <span class="spanName">手机号码:</span>
    <el-input v-model="telInput" style="width:200px " maxlength="3" placeholder="请输入房号"><i
        slot="suffix" class="el-input__icon el-icon-search"></i>
    </el-input>
    <span class="spanName">入住时间:</span>
    <el-date-picker type="date" placeholder="选择日期" v-model="date"></el-date-picker>

    <el-button type="primary" style="margin-left: 20px">搜索</el-button>
    <el-button type="info" style="margin-left: 20px">重置</el-button>
    <el-divider></el-divider>
    <div>
      <template>
        <el-table
            :data="tableData"
            border
            style="width: 1451px;margin: 30px 30px 0 30px">
          <el-table-column
              prop="id"
              label="序号"
              width="50">
          </el-table-column>
          <el-table-column
              prop="room"
              label="房间号"
              width="100">
          </el-table-column>
          <el-table-column
              prop="idNUmber"
              label="身份证"
              width="250">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="150">
          </el-table-column>
          <el-table-column
              prop="gender"
              label="性别"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="phoneNumber"
              label="手机号"
              width="200px">
          </el-table-column>
          <el-table-column
              prop="inNumber"
              label="入住人数"
              width="100px">
          </el-table-column>
          <el-table-column
              prop="inTime"
              label="入住时间"
              width="200px">
          </el-table-column>
          <el-table-column
              prop="outTime"
              label="退房时间"
              width="200px">
          </el-table-column>
          <el-table-column
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">修改
              </el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      formLabelWidth: '120px',
      date: '',
      roomInput: '',
      telInput: '',
      roomValue: "",
      tableData: [{
        id: '',
        inTime: '2022-05-02',
        outTime: '2022-05-02',
        name: '王小虎',
        room: 108,
        idNUmber: '333333333333333333333333',
        gender: 'nan',
        phoneNumber: '13755556666',
        inNumber: '2',
        money: 2003
      }],
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key);
      this.currentIndex = key
    }
  }
}
</script>
<style>
.spanName {
  margin: 0 10px;
}

</style>